<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/view/jsp/public/include.base.jsp" %>
<div class="panel">
    <div class="panel-body">
        <div class="table-primary">
            <table id="tb_user"></table>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        $('#tb_user').bootstrapTable({
            url: '${pageContext.request.contextPath}/system/user/listData.json',
            responseHandler: function (res) {
                return res.data;
            },
            queryParams: function (params) {
                return params;
            },
            pagination: true,
            pageList: '[10,20, 50, 100]',
            //showColumns: true,
            showRefresh: true,
            showToggle: true,
            //showPaginationSwitch:true,
            sidePagination: 'server',
            //striped:true,
            sortable: false,
            height: 600,
            search: true,
            searchAlign: 'left',
            toolbar: '' +
            '<div>' +
            '<button id="add" style="margin-right:10px;" class="btn btn-default" type="button"><i style="margin-right:2px;" class="fa fa-plus"></i><span>新增用户</span></button>' +
            '</div>',
            idField: 'id',
            //singleSelect: true,
            clickToSelect: true,
            columns: [{
                field: 'account',
                title: '用户名',
                width: 100
            }, {
                field: 'roles',
                title: '权限类别',
                width: 100,
                formatter:function(value,row,index){
                    if(null != value && value.length > 0){
                        if(value.length > 1){
                            var strHtml = '';
                            $.each(value,function(index,item){
                                strHtml += item.name;
                                strHtml += ',';
                            });
                            return strHtml.substring(0,strHtml.length - 1);
                        }else
                            return value[0].name;

                    }
                    return null;
                }
            }, {
                field: 'bar.name',
                title: '酒吧名称',
                valign: 'middle',
                width: 100
            }, {
                field: 'name',
                title: '姓名',
                valign: 'middle',
                width: 100
            }, {
                field: 'phone',
                title: '手机号',
                width: 100
            }, {
                field: 'createTime',
                title: '新增时间',
                width: 100,
                formatter:function(value,row,index){
                    return (new Date(value)).Format("yyyy-MM-dd hh:mm:ss")
                }
            }, {
                field: 'status',
                title: '当前状态',
                width: 100,
                formatter: function (value, row, index) {
                    switch (value){
                        case 1: return '<span>正常</span>';
                        case 2: return '<span>取消</span>';
                        default :return value;
                    }
                }
            }, {
                field: 'op',
                title: '操作',
                align: 'center',
                width: 100,
                formatter: function (value, row, index) {
                    var strHtml = '';
                    strHtml += '<a href="javascript:void(0);" onclick="editUser(\'' + row.id + '\')">详情</a>&nbsp;&nbsp;';
                    strHtml += '<a href="javascript:void(0);" onclick="removeUser(\'' + row.id + '\')">删除</a>&nbsp;&nbsp;';
                    return strHtml;
                }
            }]
        });
        $('.search input').css("width","250px");
        $('.search input').attr("placeholder", "用户名，电话，权限");
        $('#add').bind("click", function () {
            parent.load("/system/user/create");
        });
    });
</script>
<script type="text/javascript">
    var editUser = function (id) {
        parent.load("/system/user/edit?id=" + id);
    };

    var removeUser = function (id) {
        bootbox.confirm({
            title: '<span style="font-size: 14px;"><B>提示</B></span>',
            message: "<div style='text-align: left;'><span style='font-size: 14px;'>确认要删除吗?</span></div>",
            callback: function (result) {
                if (result) {
                    $.ajax({
                        type: 'POST',
                        url: '${pageContext.request.contextPath}/system/user/remove',
                        data: {id: id},
                        success: function (data) {
                            if (data.meta.success) {
                                bootbox.alert({
                                    title: '<span style="font-size: 14px;"><B>提示</B></span>',
                                    message: "<div style='text-align: left;'><span style='font-size: 14px;'>操作成功</span></div>",
                                    callback: function () {
                                        $('#tb_user').bootstrapTable('refresh');
                                    },
                                    className: "bootbox-sm"
                                });
                            }
                        },
                        error: function () {
                        }
                    });
                }
            },
            buttons: {
                confirm: {label: '确定'},
                cancel: {label: '取消'}
            },
            className: "bootbox-sm"

        });
    };
</script>

